<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">优惠券管理</span>
  </div>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="优惠券名称">
          <el-input v-model="searchCouponForm.name" @keydown.enter.prevent="searchCoupon" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="优惠券类型">
          <el-select v-model="searchCouponForm.type" @change="searchCoupon" placeholder="请选择" style="width: 100px">
            <el-option v-for="item in couponTypeArr" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="searchCoupon">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        优惠券列表
        <el-button @click="addCoupon" type="primary" style="float:right;margin-top: -3px;">新增优惠券</el-button>
      </div>
      <div>
        <el-table :data="couponArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="优惠券名称" align="center"></el-table-column>
          <el-table-column  prop="type" label="优惠券类型" align="center" :formatter="couponTypeFormatter"></el-table-column>
          <el-table-column  prop="effect" label="优惠券效果" align="center"></el-table-column>
          <el-table-column  prop="userCondition" label="使用条件" align="center"></el-table-column>
          <el-table-column  prop="validityPeriod" label="有效时间" align="center"></el-table-column>
          <el-table-column  prop="issuedQuantity" label="发放数量" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="look(scope.row)" link type="primary" size="small">查看</el-button>
              <el-button @click="deleteCoupon(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px; ">
      <el-form label-position="top" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="12">
        <el-form-item label="优惠券名称" >
          <el-input v-model="saveCouponForm.name" placeholder="请输入"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="优惠券类型" >
          <el-select v-model="saveCouponForm.type" placeholder="请选择">
            <el-option v-for="item in couponTypeArr" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
        <el-form-item label="优惠券效果" >
          <el-input v-model="saveCouponForm.effect" placeholder="请输入"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="使用条件" >
          <el-input v-model="saveCouponForm.userCondition" placeholder="请输入"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
           <el-col :span="12">
        <el-form-item label="有效时间" >
          <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD hh:mm:ss"
              format="YYYY-MM-DD hh:mm:ss"
              v-model="validityPeriod"
          ></el-date-picker>
        </el-form-item>
           </el-col>
          <el-col :span="12">
        <el-form-item label="发放数量">
          <el-input v-model="saveCouponForm.issuedQuantity" placeholder="请输入"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
            <el-col :span="12">
        <el-form-item label="已使用数量" >
          <el-input v-model="saveCouponForm.usedQuantity" placeholder="请输入"></el-input>
        </el-form-item>
            </el-col>
          <el-col :span="12">
        <el-form-item label="状态" >
          <el-select v-model="saveCouponForm.status" placeholder="请选择">
            <el-option v-for="item in couponStatus" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" v-if="dialogTitle==='编辑优惠券'">
          <el-col :span="12">
            <el-form-item label="创建时间" >
          <el-input v-model="saveCouponForm.createTime" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" >
          <el-input v-model="saveCouponForm.updateTime" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
            <el-col :span="12">
        <el-form-item label="备注">
          <el-input v-model="saveCouponForm.remark" placeholder="请输入"></el-input>
        </el-form-item>
            </el-col>
          <el-col :span="12">
        <el-form-item label="发放渠道" >
          <el-input v-model="saveCouponForm.issuedChannel" placeholder="请输入"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saveCoupon" type="primary">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog  v-model="lookDialogVisible" title="优惠劵详细信息"
               :close-on-click-modal="false" style="width:800px;padding:40px; ">
      <el-form label-position="top" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="优惠券名称" >
              <el-input v-model="saveCouponForm.name"  readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券类型" >
              <el-select v-model="saveCouponForm.type" placeholder="请选择">
                <el-option v-for="item in couponTypeArr" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="优惠券效果" >
              <el-input v-model="saveCouponForm.effect" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用条件" >
              <el-input v-model="saveCouponForm.userCondition" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="有效时间" >
              <el-input v-model="saveCouponForm.validityPeriod" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发放数量">
              <el-input v-model="saveCouponForm.issuedQuantity" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="已使用数量" >
              <el-input v-model="saveCouponForm.usedQuantity" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" >
              <el-select v-model="saveCouponForm.status" disabled>
                <el-option v-for="item in couponStatus" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" v-if="dialogTitle==='编辑优惠券'">
          <el-col :span="12">
            <el-form-item label="创建时间" >
              <el-input v-model="saveCouponForm.createTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" >
              <el-input v-model="saveCouponForm.updateTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="saveCouponForm.remark" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发放渠道" >
              <el-input v-model="saveCouponForm.issuedChannel" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="editCoupon"  type="primary">编辑</el-button>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

const dialogTitle=ref("新增优惠券")
const dialogVisible=ref(false)
const searchCouponForm=ref({})
const couponArr=ref([])
const saveCouponForm=ref({})
const couponTypeArr=ref([])
const validityPeriod=ref([])
const lookDialogVisible=ref(false)
const couponStatus=ref([])
onMounted(()=>{
  searchCoupon();
  loadDictOptions(couponStatus,"CouponStatus");
  loadDictOptions(couponTypeArr,"CouponType")
})
const couponTypeFormatter=(row,column,cellValue,index)=>{
  if (!couponTypeArr){
    return cellValue;
  }
  for (let item of couponTypeArr.value){
    if (item.value == cellValue){
      cellValue = item.label
    }
  }
  return cellValue;
}
const look =(row)=>{
  lookDialogVisible.value=true
  saveCouponForm.value=row
}
const handleClose = () => {
  dialogVisible.value = false
  saveCouponForm.value={}
}
const reset=()=>{
  searchCouponForm.value={}
  searchCoupon()
}
const addCoupon=()=>{
  saveCouponForm.value={}
  dialogVisible.value=true
  dialogTitle.value="新增优惠券"
}

const saveCoupon=()=>{
  console.log(validityPeriod.value)
  saveCouponForm.value.validityPeriod=validityPeriod.value[0]+'至'+validityPeriod.value[1]
  console.log(saveCouponForm.value)
  axios.post(BASE_URL+'/v1/coupon/save',saveCouponForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("保存成功")
          dialogVisible.value=false
          saveCouponForm.value={}
          searchCoupon()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const editCoupon=()=>{
  dialogVisible.value=true
  dialogTitle.value="编辑优惠券"
  lookDialogVisible.value=false
}
const deleteCoupon=(id)=>{
  if(confirm("确定要删除该优惠券吗?")) {
    axios.delete(BASE_URL + '/v1/coupon/delete/' + id)
        .then((response) => {
          if (response.data.code == 2000) {
            ElMessage.success("删除成功")
            searchCoupon()
          } else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}

const searchCoupon =()=>{
  axios.post(BASE_URL+'/v1/coupon/select',searchCouponForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          couponArr.value=response.data.data
          searchCouponForm.value={}
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
</script>

<style scoped>

</style>